<template>
  <header class="editor-header">
    <h1 class="editor-logo" @click="$router.back()">
      <vab-remix-icon
        v-if="logo"
        style="vertical-align: middle"
        :icon-class="logo"
      />
      <span class="editor-title">专题编辑器</span>
    </h1>
    <nav class="editor-navbar">
      <h2 class="navbar-title">专题： {{ root.topic.name }}</h2>
      <div class="navbar-right">
        <el-button
          type="primary"
          round
          size="medium"
          icon="el-icon-back"
          @click="handleBack"
        >
          返回
        </el-button>
      </div>
    </nav>
  </header>
</template>

<script>
  import { mapGetters } from 'vuex'
  import mixin from '@/views/editor/mixin.js'
  export default {
    name: 'EditorHeader',
    mixins: [mixin],
    data() {
      return {
        root: {
          topic: {},
        },
      }
    },
    computed: {
      ...mapGetters({
        logo: 'settings/logo',
      }),
    },
    methods: {
      handleBack() {
        this.root.cleanCache()
        this.$router.back()
      },
    },
  }
</script>

<style scoped>
  .editor-header {
    background: #f5f7fa;
    height: 58px;
    border-bottom: 1px solid #425668;
  }
  .editor-logo {
    float: left;
    background: rgb(54, 74, 93);
    margin: 0;
    padding: 0;
    width: 230px;
    height: 100%;
    text-align: center;
    line-height: 58px;
    font-size: 24px;
    font-weight: normal;
  }

  .editor-title {
    vertical-align: middle;
  }
  .editor-navbar {
    margin-left: 230px;
    height: 100%;
    line-height: 58px;
    padding: 0 15px;
  }

  .navbar-title {
    padding: 0;
    margin: 0;
    color: #555;
    font-size: 20px;
    float: left;
  }

  .navbar-right {
    float: right;
  }
</style>
